import styles from './about.less';
import React, { useEffect, useState } from 'react';
import { IRouteComponentProps } from 'umi';
import { IAboutListItem, IPages } from '@/utils/about';
import { MessageOutlined } from '@ant-design/icons';
import Read from '@/components/Read';
import { addmsg, getAbout } from '@/services';
var moment = require('moment');
import { Form, Input, Button, Modal, Pagination, message } from 'antd';
import { values } from 'mobx';
const { TextArea } = Input;
const About: React.FC<IRouteComponentProps> = ({ location }) => {
  //数据列表
  let [aboutList, getList] = useState<IAboutListItem[]>([]);
  //数据列表长度
  let [aboutListlen, getListlen] = useState(0);
  //分页
  let [pages, getPages] = useState(1);
  let params: IPages = { page: 1, pageSize: 6 };
  useEffect(() => {
    if (pages) {
      params = { ...params, page: pages, pageSize: 6 };
    } else {
      params = { ...params, page: pages, pageSize: 6 };
    }
    getAbout(params).then((ok) => {
      //添加展开/隐藏回复框属性
      ok.data[0].map((item: any) => {
        item.isFlag = false;
        item.children.map((item1: any) => {
          item1.isFlag = false;
        });
      });
      getList(ok.data[0]);
      getListlen(ok.data[1]);
    });
  }, [pages]);
  console.log('aboutList...', aboutList);

  //随机背景色
  function randomColor() {
    var arr = [
      '0',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
    ]; // 下标 [0-15]
    var str = '#';
    //生成0-15随机下标
    for (var i = 1; i <= 6; i++) {
      var index = Math.floor(Math.random() * 16);
      str += arr[index];
    }
    return str;
  }
  //时间差
  function dateFormat(date: any) {
    let m2 = moment(); //当下时间
    // let m2=moment('2019-12-18 10:10:00');
    let m1 = moment(date);
    let du = moment.duration(m2 - m1, 'ms'); //做差
    let months = du.get('months');
    let days = du.get('days');
    let hours = du.get('hours');
    let mins = du.get('minutes');
    //  输出结果为   01天08时09分40秒
    if (months > 0) {
      return months + 1 + '个月之前';
    } else if (days > 0) {
      return days + '天之前';
    } else if (hours > 0) {
      return hours + '小时之前';
    } else {
      return mins + '分钟之前';
    }
  }
  //点击显示与隐藏 回复框
  const [isFlag, setIsFlag] = useState(false);
  //展开父级回复框
  function btn(i1: number) {
    aboutList[i1].isFlag = !aboutList[i1].isFlag;
  }
  //展开子级回复框
  function btn1(i1: number, i2: number) {
    aboutList[i1].children[i2].isFlag = !aboutList[i1].children[i2].isFlag;
  }
  //评论点击全局提示
  const success = () => {
    message.success('评论成功,已提交审核');
  };
  //点击发布
  let [contents, setContents] = useState("")
  const onFinish = (values: any) => {
    if (localStorage.getItem('user')) {
      let data = JSON.parse(localStorage.getItem('user') as any);
      let params = {
        name: data.name,
        email: data.email,
        content: values.content,
        url: location.pathname,
        hostId: "a5e81ffe-0ad0-4be9-acca-c0462b1b98a1"
      };
      addmsg(params).then(ok => {
        success()
      })
    } else {
      showModal()
    }

  };

  //设置邮箱弹框
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const email = (values: any) => {
    //本地存储
    localStorage.setItem('user', JSON.stringify(values));
    handleOk();
  };
  return (
    <main className={styles.mainAbout}>
      <div className={styles.wrapper}>
        {/* //顶部图片 +标题 */}
        <div className={styles.container}>
          {/* 顶部图片 */}
          <div className={styles.imgTop}>
            <img
              src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-04/despaired-2261021_1280.jpg"
              alt=""
            />
          </div>
          {/* 图片标题 */}
          <div className={styles.TDituBtews}>
            <div className={styles.markdown}>
              <h2>
                这世界只有一种英雄主义，就是在看清了生活的真相之后，依然热爱生活。
              </h2>
            </div>
          </div>
        </div>

        {/* 评论区 */}
        <div className={styles.commentBox}>
          <div className={styles.comment}>
            <p>评论</p>
            <div>
              <div className={styles.commentId}>
                {/* 评论输入框 */}
                <div className={styles.commentInp}>
                  <Form onFinish={onFinish}>
                    <Form.Item name="content">
                      <div className={styles.antdInp}>
                        <TextArea
                          placeholder="请输入评论内容(支持 Markdown)"
                          className={styles.antInput}
                          onClick={() => {
                            localStorage.getItem('user') ? null : showModal();
                          }}
                          onChange={(e) => { setContents(e.target.value) }}
                        />
                      </div>
                    </Form.Item>
                    <Form.Item>
                      <div className={styles.buttonBox}>
                        <Button type="primary" htmlType="submit">
                          表情
                        </Button>
                        {
                          contents.length ? <Button type="primary" htmlType="submit" danger>
                            发布
                          </Button> : <Button type="primary" htmlType="submit" disabled>
                            发布
                          </Button>
                        }

                      </div>
                    </Form.Item>
                  </Form>
                </div>
                {/* 每一项评论 */}

                {aboutList &&
                  aboutList.map((item: IAboutListItem, index: number) => {
                    return (
                      <div key={item.id} className={styles.commentItem}>
                        <header>
                          <div
                            style={{ background: randomColor() }}
                            className={styles.itemName}
                          >
                            {item.name.charAt(0).toUpperCase()}
                          </div>
                          <div>
                            <strong>{item.name}</strong>
                          </div>
                        </header>
                        <main>
                          <div
                            dangerouslySetInnerHTML={{ __html: item.content }}
                          ></div>
                        </main>
                        <footer>
                          <div className={styles.timer}>
                            <span>{item.userAgent}</span>
                            <span>{dateFormat(item.createAt)}</span>
                            <span
                              onClick={() => {
                                setIsFlag(isFlag ? false : true);
                                btn(index);
                              }}
                            >
                              <span>
                                <MessageOutlined />
                                回复
                              </span>
                            </span>
                          </div>
                          {/* 回复框 */}
                          {item.isFlag ? (
                            <div className={styles.commentInp}>
                              <Form onFinish={onFinish}>
                                <Form.Item name="content">
                                  <div className={styles.antdInp}>
                                    <TextArea
                                      onChange={(e) => { setContents(e.target.value) }}
                                      placeholder={`回复${item.name}`}
                                      className={styles.antInput}
                                      onClick={() => {
                                        localStorage.getItem('user')
                                          ? null
                                          : showModal();
                                      }}
                                    />
                                  </div>
                                </Form.Item>
                                <Form.Item>
                                  <div className={styles.buttonBox}>
                                    <Button
                                      type="primary"
                                      htmlType="submit"
                                      onClick={() => {
                                        setIsFlag(isFlag ? false : true);
                                        btn(index);
                                      }}
                                    >
                                      收起
                                    </Button>
                                    {
                                      contents.length ? <Button type="primary" htmlType="submit" >
                                        发布
                                      </Button> : <Button type="primary" htmlType="submit" disabled>
                                        发布
                                      </Button>
                                    }
                                  </div>
                                </Form.Item>
                              </Form>
                            </div>
                          ) : null}

                          {/* 他人回复 */}
                          {item.children ? (
                            <div className={styles.childrensBox}>
                              {item.children.map((item1, index1) => {
                                return (
                                  <div
                                    key={item1.id}
                                    className={styles.childrens}
                                  >
                                    <header>
                                      <div
                                        style={{ background: randomColor() }}
                                        className={styles.itemName}
                                      >
                                        {item1.name.charAt(0).toUpperCase()}
                                      </div>
                                      <div>
                                        <strong>{item1.name}</strong>
                                        <span className={styles.childrenhf}>
                                          回复
                                        </span>
                                        <strong>{item.name}</strong>
                                      </div>
                                    </header>
                                    <main>
                                      <div
                                        dangerouslySetInnerHTML={{
                                          __html: item1.content,
                                        }}
                                      ></div>
                                    </main>
                                    <footer>
                                      <div className={styles.timer}>
                                        <span>{item.userAgent}</span>
                                        <span>{dateFormat(item.createAt)}</span>
                                        <span
                                          onClick={() => {
                                            setIsFlag(isFlag ? false : true);
                                            btn1(index, index1);
                                          }}
                                        >
                                          <span>
                                            <MessageOutlined />
                                            回复
                                          </span>
                                        </span>
                                      </div>
                                      {/* 回复框 */}
                                      {item1.isFlag ? (
                                        <div className={styles.commentInp}>
                                          <Form onFinish={onFinish}>
                                            <Form.Item name="content">
                                              <div className={styles.antdInp}>
                                                <TextArea
                                                  onChange={(e) => { setContents(e.target.value) }}
                                                  onClick={() => {
                                                    localStorage.getItem('user')
                                                      ? null
                                                      : showModal();
                                                  }}
                                                  placeholder={`回复${item1.name}`}
                                                  className={styles.antInput}
                                                />
                                              </div>
                                            </Form.Item>
                                            <Form.Item>
                                              <div className={styles.buttonBox}>
                                                <Button
                                                  type="primary"
                                                  htmlType="submit"
                                                  onClick={() => {
                                                    setIsFlag(
                                                      isFlag ? false : true,
                                                    );
                                                    btn1(index, index1);
                                                  }}
                                                >
                                                  收起
                                                </Button>
                                                {
                                                  contents.length ? <Button type="primary" htmlType="submit" >
                                                    发布
                                                  </Button> : <Button type="primary" htmlType="submit" disabled>
                                                    发布
                                                  </Button>
                                                }
                                              </div>
                                            </Form.Item>
                                          </Form>
                                        </div>
                                      ) : null}
                                    </footer>
                                  </div>
                                );
                              })}
                            </div>
                          ) : null}
                        </footer>
                      </div>
                    );
                  })}
                {/* 分页按钮 */}
                <div className={styles.pagesBox}>
                  <Pagination
                    defaultCurrent={1}
                    total={aboutListlen}
                    defaultPageSize={6}
                    onChange={(e) => {
                      getPages(e);
                    }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 推荐阅读.......... */}
          <div className={styles.commentBottom}>
            <div className={styles.tj}>
              <p>推荐阅读</p>
            </div>
            <div className={styles.tj2}>
              <Read />
            </div>
          </div>
        </div>
      </div>

      {/* 设置邮箱弹框 */}
      <Modal
        title="请设置你的信息"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        {/* <Reply  /> */}
        <Form name="basic" onFinish={email}>
          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input />
          </Form.Item>
          <div className={styles.tk}>
            <Form.Item>
              <Button type="primary" htmlType="button" onClick={handleOk}>
                取消
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                设置
              </Button>
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </main>
  );
};

export default About;
